// CustomRenderer.js
import inherits from "inherits";
import BaseRenderer from "diagram-js/lib/draw/BaseRenderer";
import { append as svgAppend, create as svgCreate } from "tiny-svg";
import { customElements2, customConfig, STATICPATH, hasLabelElements } from "../../utils/util";
/**
 * A renderer that knows how to render custom elements.
 */
export default function CustomRenderer(eventBus, styles, bpmnRenderer) {
	BaseRenderer.call(this, eventBus, 2000);
	let computeStyle = styles.computeStyle;

	this.drawElements = function (parentNode, element) {
		const type = element.type; // 获取到类型
		// if (type !== 'label') {
		if (customElements2.includes(type)) {
			// or customConfig[type]
			return drawCustomElements(parentNode, element, bpmnRenderer);
		}
		const shape = bpmnRenderer.drawShape(parentNode, element);
		return shape;
		// } else {
		//     console.log(element);
		// }
	};
}

inherits(CustomRenderer, BaseRenderer);

CustomRenderer.$inject = ["eventBus", "styles", "bpmnRenderer"];

CustomRenderer.prototype.canRender = function (element) {
	console.log(element);
	return true;
	// return !element.labelTarget;
};

CustomRenderer.prototype.drawShape = function (parentNode, element) {
	return this.drawElements(parentNode, element);
};

CustomRenderer.prototype.getShapePath = function (shape) {
	console.log(shape);
};

function drawCustomElements(parentNode, element, bpmnRenderer) {
	const { type } = element;
	const { field, attr } = customConfig[type];
	const url = `${STATICPATH}${field}.png`;
	const customIcon = svgCreate("image", { ...attr, href: url });
	element["width"] = attr.width;
	element["height"] = attr.height;
	svgAppend(parentNode, customIcon);

	// 判断是否有name属性来决定是否要渲染出label
	if (!hasLabelElements.includes(type) && element.businessObject.name) {
		const text = svgCreate("text", {
			x: attr.x,
			y: attr.y + attr.height + 20,
			"font-size": "14",
			fill: "#000",
		});
		text.innerHTML = element.businessObject.name;
		svgAppend(parentNode, text);
	}
	return customIcon;
}
